<template>
  <div :class="{'img-cos':fileList.length}">
    <el-upload list-type="picture-card" :limit="1" action="#" :file-list="fileList" :http-request="successFn" :on-remove="removeFn">
      <i class="el-icon-plus" />
    </el-upload></div>
</template>
<script>
import COS from 'cos-js-sdk-v5'

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDsZ2GExRgfPuAAxUmpcATWKsAD1atzrUr',
  SecretKey: 'A5kBOL2UgdKmyvd5HEvNZVEiwwhDTUGn'
})
export default {
  props: {},

  data() {
    return {
      fileList: [] // 图片地址

    }
  },
  methods: {
    // 自定义上传行为的函数
    successFn(res) {
      this.fileList.push({ url: '' })
      // res时我们上传的图片对象
      // 给后端的对象市res.file
      console.log(35, res)
      // console.log(28, this.fileList)"

      cos.putObject({
        Bucket: 'hr-project-77-1259170259', /* 必须 存储桶名字*/
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 上传的文件名-字符串*/
        StorageClass: 'STANDARD',
        Body: res.file, // 上传文件对象
        onProgress: (progressData) => { // 上传进度的回调
        //   console.log(JSON.stringify(progressData))
          this.percent = progressData.percent * 100
          console.log('this.percent : ', this.percent)
        }
      }, (err, data) => {
        // 成功或失败的提示
        // 上传成功err值为null
        // 普通函数改为箭头函数 修正this指向
        if (!err) {
          console.log(49, data.Location, err)
          this.fileList[0].url = 'http://' + data.Location
        }
      })
    },
    // 移除图片的钩子
    removeFn() {
      this.fileList = []
    }
  }
}
</script>

<style lang="scss" >
.img-cos{
  .el-upload--picture-card{

        display:none
  }
}
</style>
